<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Creative - Bootstrap 3 Responsive Admin Template">
    <meta name="author" content="GeeksLabs">
    <meta name="keyword" content="Creative, Dashboard, Admin, Template, Theme, Bootstrap, Responsive, Retina, Minimal">
    <link rel="shortcut icon" href="img/favicon.png">

    <title>Charts | Creative - Bootstrap 3 Responsive Admin Template</title>

    <!-- Bootstrap CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- bootstrap theme -->
    <link href="css/bootstrap-theme.css" rel="stylesheet">
    <!--external css-->
    <!-- font icon -->
    <link href="css/elegant-icons-style.css" rel="stylesheet"/>
    <link href="css/font-awesome.min.css" rel="stylesheet"/>
    <!-- Custom styles -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet"/>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <script src="js/lte-ie7.js"></script>
    <![endif]-->
</head>

<body>
<!-- container section start -->
<section id="container" class="">
    <!--header start-->

    <header class="header dark-bg">
        <div class="toggle-nav">
            <div class="icon-reorder tooltips" data-original-title="Toggle Navigation" data-placement="bottom"></div>
        </div>

        <!--logo start-->
        <a href="textDemo.html" class="logo">Nice <span class="lite">Admin</span></a>
        <!--logo end-->

        <div class="nav search-row" id="top_menu">
            <!--  search form start -->
            <ul class="nav top-menu">
                <li>
                    <form class="navbar-form">
                        <input class="form-control" placeholder="Search" type="text">
                    </form>
                </li>
            </ul>
            <!--  search form end -->
        </div>

    </header>
    <!--header end-->

    <!--sidebar start-->
    <aside>
        <div id="sidebar" class="nav-collapse ">
            <!-- sidebar menu start-->
            <ul class="sidebar-menu">
                <li class="active">
                    <a class="" href="chart-chartjs.html">
                        <span>月湖桥</span>
                    </a>
                </li>
                <li class="sub-menu">
                    <a href="javascript:;" class="">
                        <span>晴川桥</span>
                        <span class="menu-arrow arrow_carrot-right"></span>
                    </a>
                    <ul class="sub">
                        <li><a class="" href="index.html">按年</a></li>
                        <li><a class="" href="chart-chartjs.html">按日</a></li>
                    </ul>
                </li>
                <li class="sub-menu">
                    <a href="javascript:;" class="">
                        <span>长江隧道</span>
                        <span class="menu-arrow arrow_carrot-right"></span>
                    </a>
                    <ul class="sub">
                        <li><a class="" href="chart-chartjs.html">按年</a></li>
                        <li><a class="" href="chart-chartjs.html">按日</a></li>
                        <li><a class="" href="chart-chartjs.html">按时</a></li>
                    </ul>
                </li>
                <li>
                    <a class="" href="chart-chartjs.html">
                        <span>天兴洲长江大桥</span>
                    </a>
                </li>
                <li>
                    <a class="" href="chart-chartjs.html">
                        <span>长丰桥</span>

                    </a>

                </li>

                <li class="sub-menu">
                    <a href="javascript:;" class="">
                        <span>长江二桥</span>
                        <span class="menu-arrow arrow_carrot-right"></span>
                    </a>
                    <ul class="sub">
                        <li><a class="" href="chart-chartjs.html">按年</a></li>
                    </ul>
                </li>

                <li class="sub-menu">
                    <a href="javascript:;" class="">
                        <span>白沙洲长江大桥</span>
                        <span class="menu-arrow arrow_carrot-right"></span>
                    </a>
                    <ul class="sub">
                        <li><a class="" href="chart-chartjs.html">按年</a></li>
                        <li><a class="" href="chart-chartjs.html"><span>按日</span></a></li>
                        <li><a class="" href="chart-chartjs.html">按时</a></li>
                        <li><a class="" href="chart-chartjs.html">按分</a></li>
                    </ul>
                </li>

            </ul>
            <!-- sidebar menu end-->
        </div>
    </aside>
    <!--sidebar end-->

    <!--main content start-->
    <section id="main-content">
        <section class="wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <h3 class="page-header"><i class="icon_piechart"></i> Chart</h3>
                    <ol class="breadcrumb">
                        <li><i class="fa fa-home"></i><a href="textDemo.html">Home</a></li>
                        <li><i class="icon_piechart"></i>Chart</li>

                    </ol>
                </div>
            </div>
            <div class="row">
                <!-- chart morris start -->
                <div class="col-lg-12">
                    <section class="panel">
                        <header class="panel-heading">
                            <h3>生成图表</h3>
                        </header>
                        <div class="panel-body">
                            <div class="tab-pane" id="chartjs">
                                <div class="row">
                                    <!-- Line -->
                                    <div class="col-lg-6">
                                        <section class="panel">
                                            <header class="panel-heading">
                                                Line
                                            </header>
                                            <div class="panel-body text-center">
                                                <canvas id="line" height="300" width="450"></canvas>
                                            </div>
                                        </section>
                                    </div>
                                    <!-- Bar -->
                                    <div class="col-lg-6">
                                        <section class="panel">
                                            <header class="panel-heading">
                                                Bar
                                            </header>
                                            <div class="panel-body text-center">
                                                <canvas id="bar" height="300" width="500"></canvas>
                                            </div>
                                        </section>
                                    </div>
                                </div>
                                <div class="row">
                                    <!-- Radar -->
                                    <div class="col-lg-6">
                                        <section class="panel">
                                            <header class="panel-heading">
                                                Radar
                                            </header>
                                            <div class="panel-body text-center">
                                                <canvas id="radar" height="300" width="400"></canvas>
                                            </div>
                                        </section>
                                    </div>
                                    <!-- Polar Area -->
                                    <div class="col-lg-6">
                                        <section class="panel">
                                            <header class="panel-heading">
                                                Polar Area
                                            </header>
                                            <div class="panel-body text-center">
                                                <canvas id="polarArea" height="300" width="400"></canvas>
                                            </div>
                                        </section>
                                    </div>
                                </div>
                                <div class="row">

                                    <!-- Pie -->
                                    <div class="col-lg-6">
                                        <section class="panel">
                                            <header class="panel-heading">
                                                Pie
                                            </header>
                                            <div class="panel-body text-center">
                                                <canvas id="pie" height="300" width="400"></canvas>
                                            </div>
                                        </section>
                                    </div>
                                    <!-- Doughnut -->
                                    <div class="col-lg-6">
                                        <section class="panel">
                                            <header class="panel-heading">
                                                Doughnut
                                            </header>
                                            <div class="panel-body text-center">
                                                <canvas id="doughnut" height="300" width="400"></canvas>
                                            </div>
                                        </section>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </section>
        </div>
        <!-- chart morris start -->
        </div>
    </section>
    <!--main content end-->
</section>
<!-- container section end -->
<!-- javascripts -->
<script src="js/jquery.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- nice scroll -->
<script src="js/jquery.scrollTo.min.js"></script>
<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
<!-- chartjs -->
<script src="assets/chart-master/Chart.js"></script>
<!-- custom chart script for this page only-->
<script src="js/chartjs-custom.js"></script>
<!--custome script for all page-->
<script src="js/scripts.js"></script>

</body>
</html>
